<template>
    <view >
        <mescroll-uni ref="mescrollRef" top="330px" @init="mescrollInit" @down="downCallback" @up="upCallback"
            :down="downOption" :up="upOption">
        
            <u-waterfall ref="uWaterfall" v-model="lists" :add-time="200">
                <template v-slot:left="{leftList}">
                    <view style="padding:0 9rpx 0 30rpx">
                        <community-list width="336rpx" type="waterfall" :list="leftList"></community-list>
                    </view>
                </template>
                <template v-slot:right="{rightList}">
                    <view style="padding:0 30rpx 0 9rpx;">
                        <community-list width="336rpx" type="waterfall" :list="rightList"></community-list>
                    </view>
                </template>
            </u-waterfall>
        
        </mescroll-uni>
    </view>
</template>

<script>
    import {
        getCommunityLikeLists
    } from "@/api/community.js"
    import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
    import MescrollMoreItemMixin from "@/components/mescroll-uni/mixins/mescroll-more-item.js";
    export default {
        name: 'community-like',
        mixins: [MescrollMixin, MescrollMoreItemMixin],
        props: {
            userId: {
                type: Number
            }
        },
        data() {
            return {
                lists: [],
                upOption: {
                    empty: {
                        icon: '/bundle_b/static/like_null.png',
                        tip: '暂未点赞过作品哦~', // 提示
                        fixed: true,
                        top: "0rpx",
                    }
                },
            }
        },
        mounted() {
            uni.$on('changeItem', (event) => {
                const index = this.lists.findIndex(el => el.id == event.id)
                if (index == -1) return                
                this.$refs.uWaterfall.remove(event.id)
            })
        },
        methods: {
            // 获取
            upCallback(page) {
                const pageNum = page.num
                const pageSize = page.size  

                getCommunityLikeLists({
                    user_id: this.userId,
                    page_no: pageNum,
                    page_size: pageSize,
                }).then(res => {
                    // 如果是第一页需手动置空列表
                    if (pageNum == 1) {
                        this.$refs.uWaterfall.clear()
                        this.lists = []
                    }
                    // 重置列表数据
                    const hasNext = !!res.data.more;
                    // 异步：让vue能够监听到数据改变过了
                    setTimeout(() => {
                        this.lists = [...this.lists, ...res.data.list]
                    }, 0)
                    this.mescroll.endSuccess(res.data.list.length, hasNext);
                }).catch((err) => {
                    this.mescroll.endErr()
                })
            },
        }
    }
</script>